<template>
  <div class='container'>
     <el-dialog
     title="题目预览"
    :visible="isShowPrestion"
    width="60%"
    center
    @close = 'closeFn'
    >
      <el-row style="border-bottom:2px solid #ccc; padding-bottom: 20px;margin-bottom:10px">
        <el-col style="padding: 10px 0" :span="6">【题型】：{{list.questionType |tx}}</el-col>
        <el-col style="padding: 10px 0" :span="6">【编号】：{{list.id}}</el-col>
        <el-col style="padding: 10px 0" :span="6">【难度】：{{list.difficulty |nd}}</el-col>
        <el-col style="padding: 10px 0" :span="6">【标签】：{{list.tags}}</el-col>
        <el-col style="padding: 10px 0" :span="6">【学科】：{{list.subjectName}}</el-col>
        <el-col style="padding: 10px 0" :span="6">【目录】：{{list.directoryName}}</el-col>
        <el-col style="padding: 10px 0" :span="6">【方向】：{{list.direction}}</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isShowPrestion = false" >关 闭</el-button>
      </span>
      <div>【题干】:</div>
      <div style="margin: 20px 0;color:blue"  v-html="list.question"></div>
      <div>{{list.questionType |tx}} 选项：（以下选中的选项为正确答案）</div>
      <div style="border-bottom:2px solid #ccc">
        <div style="margin-bottom:7px" v-for="item in list.options" :key="item.id">
        <el-radio
        :label="1"
        v-if="list.questionType === '1' "
        :value="item.isRight"
        style="width:100%;padding:10px 0"  >{{item.title}}</el-radio>
        <el-checkbox
        v-if="list.questionType==='2'"
        :value="item.isRight?true:false" >{{item.title}}</el-checkbox>
        </div>
      </div>
      <div style="border-bottom:2px solid #ccc;padding:5px 0">
        【参考答案】：
        <el-button type='danger'  @click="showVideo()" size="small">视频答案预览</el-button>
        <div class="video" v-show="play">
        <video ref="video" autoplay  :src="list.videoURL" controls width="400" height="300"></video>
        <!-- <video controls  width="400" height="300" :src="list.videoUrl" ></video> -->
      </div>
      </div>
    <div style="border-bottom:2px solid #ccc;padding:15px 0"  >
      【答案解析】: <span style="display:inline-block" v-html="list.answer">
        </span>
        </div>
    <div style="margin-top:10px">【题目备注】: <a href="list.remarks">{{list.remarks}}</a> </div>
    </el-dialog>
  </div>
</template>

<script>
// import { videoPlayer } from 'vue-video-player'
import { difficulty, questionType } from '@/api/hmmm/constants'
import 'video.js/dist/video-js.css'
export default {
  name: 'questions-preview',
  components: {
    // videoPlayer
  },
  props: {
    // list: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  data () {
    return {
      list: {},
      isShowPrestion: false, // 对话框布尔值
      play: false // 视频布尔值
    }
  },
  // 筛选 题型 和难度
  filters: {
    nd (value) {
      if (value) return difficulty.find(item => item.value === +value).label
    },
    tx (value) {
      if (value) return questionType.find(item => item.value === +value).label + '题'
    }
    // tx (value) {
    //   const obj = questionType.find(item => item.value === +value)
    //   console.log(obj)
    //   return obj.label + '题'
    // }
  },

  methods: {
    showVideo () {
      this.play = !this.play
      this.$refs.video.play()
      this.$refs.video.src = this.list.videoURL
    },
    // 关闭对话框
    closeFn () {
      this.play = false
      this.$nextTick(() => {
        this.isShowPrestion = false
      })
      // this.$refs.video.pause()
      // this.$refs.video.src = null
    }

  }
}
</script>

<style scoped lang='less'></style>
